import { StyleSheet, Dimensions } from "react-native";

const { width, height } = Dimensions.get("window");

const boxWidth = 200;
const boxHeight = 200;
const left = (width - boxWidth) / 2;

export default StyleSheet.create({
  container: {
    flex: 1
  },
  cameraContaienr: {
    flex: 1
  },
  rectangleContainer: {
    position: "absolute",
    top: (height - boxHeight) / 3,
    left
  },
  rectangle: {
    width: boxWidth,
    height: boxHeight

    // borderWidth: 1,
    // borderColor: "#0f0",
    // backgroundColor: "transparent"
  },
  lt1: {
    width: 30,
    height: 4,
    backgroundColor: "#0f0",
    position: "absolute",
    left: 0,
    top: 0
  },
  lt2: {
    width: 4,
    height: 30,
    backgroundColor: "#0f0",
    position: "absolute",
    left: 0,
    top: 0
  },
  rt1: {
    width: 30,
    height: 4,
    backgroundColor: "#0f0",
    position: "absolute",
    right: 0,
    top: 0
  },
  rt2: {
    width: 4,
    height: 30,
    backgroundColor: "#0f0",
    position: "absolute",
    right: 0,
    top: 0
  },
  lb1: {
    width: 30,
    height: 4,
    backgroundColor: "#0f0",
    position: "absolute",
    left: 0,
    bottom: 0
  },
  lb2: {
    width: 4,
    height: 30,
    backgroundColor: "#0f0",
    position: "absolute",
    left: 0,
    bottom: 0
  },
  rb1: {
    width: 30,
    height: 4,
    backgroundColor: "#0f0",
    position: "absolute",
    right: 0,
    bottom: 0
  },
  rb2: {
    width: 4,
    height: 30,
    backgroundColor: "#0f0",
    position: "absolute",
    right: 0,
    bottom: 0
  },
  border: {
    width: boxWidth,
    height: 1,
    backgroundColor: "#0f0"
  },
  tipContainer: {
    position: "absolute",
    top: 100,
    left: left - 10,
    padding: 10,
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    borderRadius: 8
  },
  tip: {
    color: "#fff",
    // color: "#000",
    fontWeight: "bold"
  },
  btnContainer: {
    position: "absolute",
    width: boxWidth + 100,
    padding: 10,
    top: "55%",
    left: left / 2,
    gap: 30,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "flex-start",
    // backgroundColor: "red",
    // justifyContent: "space-between",
  },
  btn: {
    width: 60,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "white",
    borderColor: "#ccc",
    borderWidth: 1,
    borderStyle: "solid",
    padding: 2,
    borderRadius: 4,
  },
  btnIcon: {
    fontSize: 22,
    color: "black"
  },
  btnText: {
    color: "black"
  },
  zomeContainer: {
    position: "absolute",
    justifyContent: "center",
    height: 40,
    width: "80%",
    top: "68%",
    // top: "75%",
    left: "10%",
    backgroundColor: "white",
    borderColor: "#ccc",
    borderWidth: 1,
    borderStyle: "solid",
    paddingTop: 4,
    paddingBottom: 4,
    borderRadius: 8
  }
});
